<!-- settings.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Settings</title>
    <style>
        #settings-form input {
            width: 1rem;
        }

        #todo-form input {
            width: 80%;
        }

        .todosInputList {
            display: flex;
            flex-direction: column;
        }

        .todosInputList input {
            margin-top: 2px;
        }

        /* 隐藏 Chrome、Safari、Opera 的数字输入框控件 */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* 隐藏 Firefox 中的数字输入框控件 */
        input[type="number"] {
            -moz-appearance: textfield;
        }

        #settings-form,
        #todo-form,
        .preview {
            border: 1px solid #ccc;
            padding: 3px;
        }
    </style>
</head>

<body>
    <form id="todo-form">
        <label>
            今日代办<div class="todo-add" style="display: inline-block;">+</div>
            <div class="todosInputList">
            </div>
        </label>
        <br />
    </form>
    <form id="settings-form">
        <label>
            开始睡眠时间:
            <input type="number" id="begin_hours" class="hours" />
            点
            <input type="number" id="begin_mintues" class="minutes" />
            分
            <span style="width: 1rem;display: inline-block;"></span>
            是否明天:
            <input type="radio" name="begin_isTomrrow" value="1" checked> 是
            <input type="radio" name="begin_isTomrrow" value="0"> 否
        </label>
        <br />
        <label>
            醒来时间:
            <input type="number" id="end_hours" class="hours" />
            点
            <input type="number" id="end_mintues" class="minutes" />
            分
            <span style="width: 1rem;display: inline-block;"></span>
            是否明天:
            <input type="radio" name="end_isTomrrow" value="1" checked> 是
            <input type="radio" name="end_isTomrrow" value="0"> 否
        </label>
        <br />
        预览:
        <div class="preview"></div>
    </form>
    <button id="submit">Submit</button>

    <script>
        function second2Str(second) {
            const allMinute = second / 60
            const hour = Math.floor(allMinute / 60)
            const minute = Math.floor(allMinute % 60)
            return `${hour}小时${minute}分`
        }

        window.onload = () => {
            document.getElementsByClassName('todo-add')[0].addEventListener('click', () => {
                const todoInput = document.createElement('input')
                todoInput.type = 'text'
                todoInput.placeholder = '请输入待办事项'
                document.querySelector('.todosInputList').appendChild(todoInput)
            })
            const { ipcRenderer } = require('electron');
            document.querySelectorAll('input[type="number"]').forEach(item => {
                item.addEventListener('input', () => {
                    const value = parseInt(item.value, 10);
                    if (value > 23) {
                        item.value = 23;
                    } else if (value < 0) {
                        item.value = 0;
                    }
                })
            })
            function preview(settings) {
                console.log('input事件')
                // 睡眠时间
                const begin_hours = document.getElementById('begin_hours').value;
                const begin_mintues = document.getElementById('begin_mintues').value;
                const begin_isTomrrow = document.querySelector('input[name="begin_isTomrrow"]:checked').value;
                const end_hours = document.getElementById('end_hours').value;
                const end_mintues = document.getElementById('end_mintues').value;
                const end_isTomrrow = document.querySelector('input[name="end_isTomrrow"]:checked').value;

                const begin_time = begin_hours + ':' + begin_mintues;
                const end_time = end_hours + ':' + end_mintues;

                const beginSleepTime = {
                    isTomorrow: begin_isTomrrow,
                    time: begin_time,
                }
                const wakeupTime = {
                    isTomorrow: end_isTomrrow,
                    time: end_time,
                }
                function getTime(timeObj) {
                    const obj = new Date()
                    timeObj.isTomorrow && obj.setDate(obj.getDate() + 1)
                    const hour = +timeObj.time.split(':')[0];
                    const minute = +timeObj.time.split(':')[1];
                    obj.setHours(hour)
                    obj.setMinutes(minute)
                    return obj
                }
                const beginSleepTimeDateObj = getTime(beginSleepTime)
                const wakeupTimeDateObj = getTime(wakeupTime)

                const allSleepTime = (wakeupTimeDateObj.getTime() - beginSleepTimeDateObj.getTime()) / 1000
                const restTime = (wakeupTimeDateObj.getTime() - Date.now()) / 1000
                const overtime_second = (Date.now() - beginSleepTimeDateObj.getTime()) / 1000

                document.querySelector('.preview').innerHTML = `
                    <div>${`睡眠时间 ${second2Str(allSleepTime)}`}</div>
                    <div>${`距离"临睡点" ${beginSleepTime.time}还有 ${second2Str(-overtime_second)}`}</div>
                    <div>${`距离"起床" ${wakeupTime.time}还有 ${second2Str(restTime)}`}</div>
                    `

            }
            document.querySelectorAll('input').forEach(item => {
                item.addEventListener('input', () => {
                    preview()
                })
            })
            function loadConfig() {
                // 加载当前设置
                ipcRenderer.invoke('get-settings').then((settings) => {
                    document.getElementById('begin_hours').value = settings.begin_time.split(':')[0] || 0;
                    document.getElementById('begin_mintues').value = settings.begin_time.split(':')[1] || 0;
                    document.getElementById('end_hours').value = settings.end_time.split(':')[0] || 0;
                    document.getElementById('end_mintues').value = settings.end_time.split(':')[1] || 0;
                    document.querySelector('input[name="begin_isTomrrow"][value="' + (settings.begin_isTomrrow || false) + '"]').checked = true;
                    document.querySelector('input[name="end_isTomrrow"][value="' + (settings.end_isTomrrow || false) + '"]').checked = true;
                    document.querySelector('.todosInputList').innerHTML = ''
                    settings.todoList && settings.todoList.forEach(todoText => {
                        const input = document.createElement('input')
                        input.value = todoText
                        document.querySelector('.todosInputList').appendChild(input)
                    })

                    preview()
                });
            }
            loadConfig()

            // 保存设置
            document.getElementById('submit').addEventListener('click', (event) => {
                event.preventDefault();
                const begin_hours = document.getElementById('begin_hours').value;
                const begin_mintues = document.getElementById('begin_mintues').value;
                const begin_isTomrrow = document.querySelector('input[name="begin_isTomrrow"]:checked').value;
                const end_hours = document.getElementById('end_hours').value;
                const end_mintues = document.getElementById('end_mintues').value;
                const end_isTomrrow = document.querySelector('input[name="end_isTomrrow"]:checked').value;

                if (begin_hours == '' || begin_mintues == '' || end_hours == '' || end_mintues == '') {
                    alert('请输入完整的时间')
                    return
                }
                const begin_time = begin_hours + ':' + begin_mintues;
                const end_time = end_hours + ':' + end_mintues;

                const todoList = Array.from(document.querySelectorAll('.todosInputList input')).map(item => item.value).filter(item => item != '')
                console.log('todoList', todoList)
                const settings = {
                    begin_time,
                    end_time,
                    begin_isTomrrow,
                    end_isTomrrow,
                    todoList,
                }
                // 通过 IPC 将设置发送给主进程
                ipcRenderer.invoke('save-settings', settings);
                loadConfig()
            });
        }




    </script>
</body>

</html>